<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<!-- 主页 -->
<template>
	<view class="container">
		<view class="search-box">
			<MySearch @click.native="goSearch" BgcColor="skyblue" Boradus="20rpx"></MySearch>
		</view>
		<!-- 轮播图 -->
			<swiper class="swiper" indicator-dots circular  autoplay interval="2000"
				duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="item.goods_id">
					<navigator :url="`/pages_sub1/product-detail/product-detail?pid=${item.goods_id}`" class="swiper-item uni-bg-red">
						<img :src="item.image_src" alt="">
					</navigator>
				</swiper-item>
			</swiper>

		 <!-- 分类导航区域 -->
     <view class="nav-list">
       <view class="nav-item" @click="goNavitem(item)" v-for="(item, index) in navlist" :key="index">
         <image :src="item.image_src" class="nav-img"></image>
       </view>
     </view>
		 <!-- 楼层区域 -->
     <view class="floor-list">
      <!-- 楼层 item 项 -->
      <view class="floor-item" v-for="(item, index) in floorList" :key="index">
       <!-- 楼层标题 -->
       <image :src="item.floor_title.image_src" class="floor-title"></image>
			<!-- 楼层图片区域 -->
<view class="floor-img-box">
  
  <!-- 左侧 1 个大图 -->
  <view class="left-img-box">
    <image @click="goToProductList(item.product_list[0])" :src="item.product_list[0].image_src"
           :style="{ width: item.product_list[0].image_width + 'rpx' }"
           mode="widthFix"></image>
  </view>

  <!-- 右侧 4 个小图 -->
  <view class="right-img-box">
    <block v-for="(product, idx) in item.product_list" :key="idx">
      <view class="right-img-item" v-if="idx !== 0">
        <image @click="goToProductList(product)" :src="product.image_src"
               :style="{ width: product.image_width + 'rpx' }"
               mode="widthFix"></image>
      </view>
    </block>
  </view>
  
</view>
    </view>
  </view>
	</view>
</template>


<script>
import MySearch from '@/components/my-search.vue'
import badge from '../../mixins/badge'
	export default {
		mixins:[badge],
		components:{
			MySearch
		},
		data() {
			return {
				swiperList:[],//轮播图
				navlist:[],//分类
				floorList:[]
			}
		},
		created(){
			this.getSwiperList()
			this.getNavList()
			this.getfloorList()
		},
		methods: {
			//轮播图
		async	getSwiperList(){
				const {message,meta:{status}} = await this.$http.get('/home/swiperdata')
				if(status!==200)return this.$showMessage()
				this.swiperList=message
			},
			//分类列表
		async	getNavList(){
				const {message,meta:{status}} = await this.$http.get('/home/catitems')
				if(status!==200) return this.$showMessage()
				this.navlist=message
			},
			//跳转分类页
			goNavitem(item){
				if(item.name==='分类'){
					uni.switchTab({ url: '/pages/category/category' })
				}
			},
			//楼层数据
		async	getfloorList(){
				const {message,meta:{status}}= await this.$http.get('/home/floordata')
				if(status!==200) return this.$showMessage()
				this.floorList=message
			},
			//点击楼层图片跳转到
			goToProductList(item){
				console.log(item.navigator_url);
			const query=item.navigator_url.split('?')
			console.log(query[1]);
			uni.navigateTo({
				url: '/pages_sub1/product-list/product-list?'+query[1]
			})
			},
			//跳转搜索页
			goSearch(){
				uni.navigateTo({url:'/pages_sub1/search/search'})
			}
		}
	}
</script>

<style scoped lang="scss">
.search-box {
  // 设置定位方式
  position: sticky;
  
  // 设置开始固定定位的条件
  top: 0;
  
  // 提高层级，防止被轮播图覆盖
  z-index: 999;
}
	.uni-margin-wrap {
		width: 100%;
	}
	.swiper {
		height: 300rpx;
		width: 100%;
	}
	.swiper-item {
		display: block;
		height: 100%;
		width: 100%;
	}
	.swiper-item image{
		width: 100%;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.nav-list {
  display: flex;
  justify-content: space-around;
  margin: 30rpx 0;

  .nav-img {
    width: 128rpx;
    height: 140rpx;
  }
}
.floor-title {
  display: flex;
  width: 100%;
  height: 60rpx;
}
.right-img-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.floor-img-box {
  display: flex;
  padding-left: 10rpx;
}
</style>

